<template>
  <!-- <div class="Echarts">
    <div>
      <el-card class="box-card">
        实时接入检测    &nbsp;
        <el-switch v-model="checkEveryTime" active-text="on" inactive-text="off"></el-switch>
        <br />
        <br />区块链接入认证  &nbsp;
        <el-switch v-model="verifyBlockChain" active-text="on " inactive-text="off" ></el-switch>
      </el-card>
    </div>
    <div id="main" style="width: 100%; height: 500%" ref="test"></div>

    <el-descriptions title="异构网络" :column="3" border>
      <el-descriptions-item
        label="UE连接数量"
        label-class-name="my-label"
        content-class-name="my-content"
      >{{ ueNum }}</el-descriptions-item>
      <el-descriptions-item label="基站数量">{{baseName}}</el-descriptions-item>
      <el-descriptions-item label="异构网络种类">
        {{
        network
        }}
      </el-descriptions-item>
    </el-descriptions>
    <el-button type="success" @click="ueConnected()">手机状态更新</el-button>
    <el-button type="success" @click="baseConnected()">更新基站状态</el-button>
    <el-button type="success" @click="discontrol()">关闭防火墙</el-button>
    <el-button type="success" @click="microservice()">微服务</el-button>
  </div> -->
</template>

<script>
import Axios from 'axios'
export default {
  name: 'Echarts',
  data () {
    return {
      ueNum: 0,
      baseName: 0,
      network: 0,
      IMSI: '',
      accessTime: '',
      enbList: [],
      compareEnbList: [],
      ueList: [],
      compareUeList: [],
      checkEveryTime: false,
      verifyBlockChain: false
    }
  },
  methods: {
    microservice(){
        Axios({ method: 'get', url: '/micro_api/python/index' }).then(res => {
        console.log(res.data)
      })
    },
    discontrol () {
      Axios({ method: 'get', url: '/python_api/discontrol' }).then(res => {
        console.log(res.data)
      })
    },
    control (imsi) {
      Axios({
        method: 'get',
        url: '/python_api/control?imsi=' + imsi + '&' + 'code=' + '200'
      }).then(res => {
        console.log(res.data)
      })
    },
    ueConnected () {
      Axios({
        method: 'get',
        url: '/api/stats'
      }).then(res => {
        this.accessTime = res.data.date_time
        // 防止UE为空
        res.data.eNB_config.forEach((v1, _) => {
          if (JSON.stringify(v1.UE) != '{}') {
            v1.UE.ueConfig.forEach((v2, _) => {
              // 比较列表作用是用来和上次列表情况进行比较，多出来的是新增的，少掉的是断开的
              if (v2.imsi != 0) {
                this.compareUeList.push(v2.imsi)
              }
            })
          }
        })
        // 遍历比较列表，如果在原列表中不存在，则进行区块链验证
        this.compareUeList.forEach((v1, _) => {
          if (!this.ueList.includes(v1)) {
            const h = this.$createElement
            // 区块链认证
            if (this.verifyBlockChain) {
              Axios({
                method: 'post',
                url: 'http://10.0.1.105/getVerifyCredentialResult',
                data: {
                  UE: {
                    ueConfig: [
                      {
                        rnti: 21221,
                        timeAlignmentTimer: 4294967295,
                        measGapConfigPattern: 4294967295,
                        measGapConfigSfOffset: 4294967295,
                        transmissionMode: 0,
                        ueAggregatedMaxBitrateUL: '0',
                        ueAggregatedMaxBitrateDL: '0',
                        capabilities: {
                          halfDuplex: 4294967295,
                          intraSFHopping: 4294967295,
                          type2Sb1: 4294967295,
                          ueCategory: 4294967295,
                          resAllocType1: 4294967295
                        },
                        ueTransmissionAntenna: 2,
                        ttiBundling: 4294967295,
                        maxHARQTx: 4294967295,
                        betaOffsetACKIndex: 0,
                        betaOffsetRIIndex: 0,
                        betaOffsetCQIIndex: 8,
                        ackNackSimultaneousTrans: 0,
                        simultaneousAckNackCqi: 0,
                        aperiodicCqiRepMode: 3,
                        tddAckNackFeedback: 4294967295,
                        ackNackRepetitionFactor: 0,
                        extendedBsrSize: 4294967295,
                        imsi: v1,
                        info: {
                          offsetFreqServing: '-1',
                          offsetFreqNeighbouring: '-1',
                          cellIndividualOffset: ['-1'],
                          filterCoefficientRsrp: '-1',
                          filterCoefficientRsrq: '-1',
                          event: {
                            a3: {
                              a3Offset: '-1',
                              reportOnLeave: -1,
                              hysteresis: '-1',
                              timeToTrigger: '-1',
                              maxReportCells: '-1'
                            }
                          }
                        }
                      }
                    ]
                  }
                }
              }).then(res => {
                if (res.data.errorMessage === 'success') {
                  this.$notify({
                    title: 'UE区块链认证成功',
                    message: 'IMSI: ' + v1 + '\n接入时间: ' + this.accessTime,
                    type: 'success'
                  })
                } else {
                  this.$notify({
                    title: 'UE区块链认证失败',
                    message: 'IMSI: ' + v1 + '\n接入时间: ' + this.accessTime,
                    type: 'warning'
                  })
                  this.control(v1)
                }
              })
            } else {
              this.$notify({
                title: 'UE接入成功',
                message: 'IMSI: ' + v1 + '\n接入时间: ' + this.accessTime,
                type: 'success'
              })
            }
          }
        })
        this.ueList.forEach((v2, _) => {
          if (!this.compareUeList.includes(v2)) {
            const h = this.$createElement
            this.$notify({
              title: 'UE断开连接',
              message: 'IMSI: ' + v2 + '\n断开时间: ' + this.accessTime,
              type: 'warning'
            })
          }
        })
        this.ueList = this.compareUeList
        this.compareUeList = []
        this.ueNum = this.ueList.length
        // console.log(this.ueList);
      })
    },
    baseConnected () {
      Axios({
        method: 'get',
        url: '/api/stats'
      }).then(res => {
        this.accessTime = res.data.date_time
        res.data.eNB_config.forEach((v1, _) => {
          this.compareEnbList.push(v1.bs_id)
        })
        this.compareEnbList.forEach((v1, _) => {
          if (!this.enbList.includes(v1)) {
            const h = this.$createElement
            this.$notify({
              title: '基站成功接入',
              message: '基站id: ' + v1 + '\n接入时间: ' + this.accessTime,
              type: 'success'
            })
          }
        })
        this.enbList.forEach((v2, _) => {
          if (!this.compareEnbList.includes(v2)) {
            const h = this.$createElement
            this.$notify({
              title: '基站断开连接',
              message: '基站id: ' + v2 + '\n断开时间: ' + this.accessTime,
              type: 'warning'
            })
          }
        })
        this.enbList = this.compareEnbList
        this.compareEnbList = []
        this.baseName = this.enbList.length
      })
    },
    myEcharts () {
      var myChart = this.$echarts.init(this.$refs.test)
      // 配置图表
      var option = {
        title: {
          text: '异构网络拓扑',
          left: 'center'
        },
        xAxis: {
          min: 0,
          max: 1000,
          show: false,
          type: 'value'
        },
        yAxis: {
          min: 0,
          max: 1000,
          show: false,
          type: 'value'
        },
        series: [
          {
            type: 'graph',
            coordinateSystem: 'cartesian2d',
            symbolSize: 70,
            data: [
              {
                symbol:
                  'path://M975.999737 465.300316c-0.3 110.799937-39.499978 212.49988-104.599941 292.099835-11.999993 14.699992-34.099981 15.899991-47.499973 2.499999-11.599993-11.599993-12.499993-30.199983-2.099998-42.899976 24.099986-29.499983 43.799975-62.099965 58.699966-97.299945C901.399779 570.400257 911.999773 518.000287 911.999773 464.000317c0-53.999969-10.599994-106.39994-31.399982-155.699912-20.099989-47.599973-48.999972-90.399949-85.799951-127.199928s-79.499955-65.599963-127.199928-85.799951C618.39994 74.600538 565.999969 64.000544 512 64.000544S405.60006 74.600538 356.300088 95.400526c-47.599973 20.099989-90.399949 48.999972-127.199928 85.799951s-65.599963 79.499955-85.799951 127.199928C122.600221 357.600377 112.000227 410.000348 112.000227 464.000317s10.599994 106.39994 31.399982 155.699912c14.899992 35.29998 34.59998 67.899962 58.699967 97.299945 10.399994 12.699993 9.599995 31.299982-2.099999 42.899976-13.399992 13.399992-35.39998 12.299993-47.399973-2.299999C87.300241 677.600196 48.000263 575.400254 48.000263 464.000317 48.000263 207.500462 256.100145-0.39942 512.7 0.00058c257.099854 0.4 463.999737 208.199882 463.299737 465.299736z M815.999828 464.000317c0 66.599962-21.399988 128.199927-57.699968 178.199899-11.499993 15.899991-34.49998 17.49999-48.399972 3.699998-11.099994-11.099994-12.499993-28.699984-3.199998-41.399976 10.599994-14.599992 19.399989-30.299983 26.499985-47.099974 12.499993-29.499983 18.799989-60.999965 18.799989-93.399947s-6.299996-63.899964-18.799989-93.399947c-12.099993-28.599984-29.399983-54.199969-51.499971-76.299957-22.099987-22.099987-47.699973-39.399978-76.299957-51.499971-29.599983-12.499993-60.999965-18.799989-93.399947-18.799989s-63.799964 6.299996-93.399947 18.799989c-28.599984 12.099993-54.199969 29.399983-76.299957 51.499971-22.099987 22.099987-39.399978 47.699973-51.499971 76.299957-12.499993 29.499983-18.799989 60.999965-18.799989 93.399947s6.299996 63.799964 18.799989 93.399947c7.099996 16.699991 15.899991 32.499982 26.499985 47.099974 9.199995 12.799993 7.899996 30.299983-3.199998 41.399976-13.799992 13.799992-36.899979 12.199993-48.399972-3.699998-36.299979-49.999972-57.699967-111.599937-57.699968-178.199899 0-167.899905 136.099923-303.999828 303.999828-303.999828s303.999828 136.099923 303.999828 303.999828z M563.299971 581.300251c44.499975-19.499989 75.699957-63.499964 76.699957-114.899935 1.299999-70.99996-56.099968-129.899926-127.099929-130.399926-71.09996-0.5-128.899927 56.999968-128.899927 127.999927 0 52.39997 31.499982 97.499945 76.699957 117.299934 11.699993 5.099997 19.299989 16.599991 19.299989 29.399983V896.000072c0 35.29998-28.699984 63.999964-63.999964 63.999964h-14.999991c-8.799995 0-15.999991 7.199996-15.999991 15.999991v31.999982c0 8.799995 7.199996 15.999991 15.999991 15.999991h222.999874c8.799995 0 15.999991-7.199996 15.999991-15.999991v-31.999982c0-8.799995-7.199996-15.999991-15.999991-15.999991h-15.999991c-35.29998 0-63.999964-28.699984-63.999964-63.999964V610.700234c0-12.799993 7.599996-24.299986 19.299989-29.399983zM512 528.000281c-35.29998 0-63.999964-28.699984-63.999964-63.999964s28.699984-63.999964 63.999964-63.999964 63.999964 28.699984 63.999964 63.999964-28.699984 63.999964-63.999964 63.999964z',
                symbolKeepAspect: true,
                name: '基站',
                value: [300, 500],
                label: {
                  show: true,
                  position: 'bottom',
                  fontWeight: 'bolder',
                  fontSize: 15
                }
              },
              {
                symbol:
                  'path://M647.499 60.657H375.167c-89.602 0-162.497 72.895-162.497 162.497v573.907c0 89.602 72.895 162.497 162.497 162.497h272.332c89.602 0 162.497-72.895 162.497-162.497V223.154c0.001-89.602-72.895-162.497-162.497-162.497z m108.332 736.404c0 59.733-48.598 108.331-108.331 108.331H375.167c-59.733 0-108.331-48.598-108.331-108.331V223.154c0-59.733 48.598-108.332 108.331-108.332h56.168c0.15 14.827 12.193 26.81 27.055 26.81h105.885c14.863 0 26.905-11.983 27.055-26.81h56.168c59.733 0 108.331 48.598 108.331 108.332v573.907z M564.276 819.304H458.391c-14.956 0-27.083 12.126-27.083 27.083s12.126 27.083 27.083 27.083h105.885c14.956 0 27.083-12.126 27.083-27.083s-12.127-27.083-27.083-27.083z',
                symbolKeepAspect: true,
                name: '手机',
                value: [100, 500],
                label: {
                  show: true,
                  position: 'bottom',
                  fontWeight: 'bolder',
                  fontSize: 15
                }
              },
              {
                symbol:
                  'path://M341.333333 512c0 93.866667 76.8 170.666667 170.666667 170.666667s170.666667-76.8 170.666667-170.666667-76.8-170.666667-170.666667-170.666667-170.666667 76.8-170.666667 170.666667z m-85.333333 0c0-140.8 115.2-256 256-256V192C334.933333 192 192 334.933333 192 512s142.933333 320 320 320 320-142.933333 320-320h-64c0 140.8-115.2 256-256 256s-256-115.2-256-256z M800 512m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z M512 224m-32 0a32 32 0 1 0 64 0 32 32 0 1 0-64 0Z M202.666667 821.333333m-74.666667 0a74.666667 74.666667 0 1 0 149.333333 0 74.666667 74.666667 0 1 0-149.333333 0Z M842.666667 224m-74.666667 0a74.666667 74.666667 0 1 0 149.333333 0 74.666667 74.666667 0 1 0-149.333333 0Z M940.8 322.133333c-14.933333 14.933333-34.133333 27.733333-55.466667 34.133334 19.2 49.066667 32 100.266667 32 155.733333 0 224-181.333333 405.333333-405.333333 405.333333-66.133333 0-125.866667-14.933333-181.333333-42.666666-8.533333 21.333333-21.333333 38.4-38.4 53.333333C358.4 962.133333 433.066667 981.333333 512 981.333333c260.266667 0 469.333333-209.066667 469.333333-469.333333 0-68.266667-14.933333-132.266667-40.533333-189.866667zM512 106.666667c74.666667 0 145.066667 21.333333 206.933333 57.6 10.666667-19.2 23.466667-36.266667 40.533334-51.2C686.933333 68.266667 603.733333 42.666667 512 42.666667 251.733333 42.666667 42.666667 251.733333 42.666667 512c0 78.933333 19.2 153.6 55.466666 219.733333 14.933333-17.066667 32-29.866667 53.333334-38.4-27.733333-55.466667-42.666667-115.2-42.666667-181.333333C106.666667 288 288 106.666667 512 106.666667z',
                symbolKeepAspect: true,
                name: '核心网',
                value: [500, 500],
                label: {
                  show: true,
                  position: 'bottom',
                  fontWeight: 'bolder',
                  fontSize: 15
                }
              },
              {
                symbol:
                  'path://M84.48 708.48v242.24h847.36v-242.24H84.48z m409.6 166.4H186.24V784h307.84v90.88z m152 0c-24.96 0-45.44-20.48-45.44-45.44s20.48-45.44 45.44-45.44 45.44 20.48 45.44 45.44-20.48 45.44-45.44 45.44z m120.96 0c-24.96 0-45.44-20.48-45.44-45.44s20.48-45.44 45.44-45.44 45.44 20.48 45.44 45.44-20.16 45.44-45.44 45.44zM929.28 85.12H82.24v597.44h847.36V85.12z m-205.76 464.96v60.48c-103.36 0-192.32-48.96-234.88-119.68-43.84 66.88-130.88 112.64-230.72 112.64v-60.48c110.72 0 200.64-67.84 200.64-151.36 0-68.8-61.44-127.04-144.96-145.28l-9.92 37.44-43.52-43.52h-2.24v-2.24L198.08 178.24l144-38.72-12.8 48.32c72 16.64 131.2 57.6 163.52 111.36 31.68-48.32 86.08-85.44 151.36-102.4l-11.2-41.28 144 38.72-105.6 105.6-11.84-44.8c-79.36 20.16-136.64 76.8-136.64 143.36 0 83.84 89.92 151.68 200.64 151.68z',
                symbolKeepAspect: true,
                name: 'OVS交换机',
                value: [700, 500],
                label: {
                  show: true,
                  position: 'bottom',
                  fontWeight: 'bolder',
                  fontSize: 15
                }
              },
              {
                symbol:
                  'path://M512.001274 15.045039a497.880869 497.880869 0 0 1 496.99699 497.086142c0 137.285182-55.886849 261.573274-145.67566 351.652466-89.81301 90.098296-214.335444 145.167493-351.32133 145.167494-137.262257 0-261.529972-55.069197-351.31751-145.173862-89.788811-90.079192-145.67566-214.367284-145.67566-351.646098a497.880869 497.880869 0 0 1 496.99317-497.086142zM489.215293 932.144136V771.518957a405.118201 405.118201 0 0 0-129.123952 26.595319 137.138718 137.138718 0 0 0-17.101903 6.511917c3.53042 7.062113 6.785742 14.098754 10.570881 20.887043 25.514032 45.602527 55.33538 80.88762 88.987717 101.223193a372.744559 372.744559 0 0 0 46.671078 5.40898z m320.120674-717.103117a128.736778 128.736778 0 0 0-10.591259-10.061441 441.222218 441.222218 0 0 1-58.315604 36.934404c27.141693 70.795612 43.939205 156.01602 46.672351 247.447775h144.843999a419.629601 419.629601 0 0 0-122.609487-274.320738z m-46.672352-40.41388a415.300634 415.300634 0 0 0-85.71329-49.415687 434.384259 434.384259 0 0 1 33.623044 51.562976c3.805517 7.062113 7.861934 15.201692 11.942549 23.339997 13.571483-8.138305 27.117495-16.556802 40.137509-25.493654z m-181.233302-77.3572c-15.172399-2.404557-30.921738-4.056417-46.64688-5.133883V253.306336a429.022402 429.022402 0 0 0 129.127773-26.588951c5.985921-2.177856 11.392353-4.356986 17.076431-6.787015-2.954752-7.337211-7.036641-14.373851-10.541588-20.887043-24.989309-46.15527-55.610477-80.888893-89.013189-101.774662z m-92.217567-5.133883c-15.723868 1.077466-31.473207 2.729325-46.671078 5.133883-33.652337 20.887043-63.473685 55.619393-88.987717 101.774662-3.781319 6.510644-7.036641 13.547285-10.816686 20.887042 5.684078 2.430029 11.392353 4.609159 17.351529 6.787016a428.859382 428.859382 0 0 0 129.123952 26.595318V92.130962z m-142.141419 33.075396a414.845959 414.845959 0 0 0-85.732395 49.415687c13.020014 8.940673 26.591498 17.355349 40.412607 25.493654a233.26369 233.26369 0 0 1 11.667451-23.339997c10.041064-19.007209 21.708515-35.811089 33.652337-51.562976z m-122.088585 79.763031c-3.255322 3.004423-7.060839 6.536116-10.316162 10.061441a419.628328 419.628328 0 0 0-122.614581 274.32456h144.874565c2.703853-91.430482 19.529385-176.648342 46.370508-247.447775a478.47757 478.47757 0 0 1-58.31433-36.934405zM92.051999 535.189712a420.779662 420.779662 0 0 0 122.614581 274.319464l10.316162 10.293237a425.318773 425.318773 0 0 1 58.318151-37.413278c-26.841123-71.096182-43.666655-155.742195-46.370508-247.19815H92.051999z m169.286933 314.488813a415.88267 415.88267 0 0 0 85.732395 49.383847 360.53328 360.53328 0 0 1-33.652337-51.562976c-4.075521-7.313012-8.137031-15.176219-11.667451-22.788528a416.635367 416.635367 0 0 0-40.412607 24.962563z m273.441954 82.465611a371.780443 371.780443 0 0 0 46.646879-5.40898c33.402711-20.335574 64.02388-55.620666 89.013189-101.223194 3.504948-6.787015 7.586836-13.823656 10.541589-20.887042a133.885943 133.885943 0 0 0-17.076431-6.511918 405.259571 405.259571 0 0 0-129.120132-26.594045v160.625179z m142.169439-33.081764a416.339892 416.339892 0 0 0 85.71329-49.383847 390.678122 390.678122 0 0 0-40.137509-24.962563c-4.075521 7.612308-8.137031 15.475516-11.942548 22.788528-10.592533 18.706639-21.684316 36.362558-33.623045 51.562976z m121.789288-79.259959l10.591259-10.293237a420.780936 420.780936 0 0 0 122.614582-274.319464H787.101455c-2.729325 91.455954-19.530658 176.101968-46.672351 247.198149a395.620965 395.620965 0 0 1 58.315604 37.414552z m-99.82478-558.105599a203.624467 203.624467 0 0 1-19.004662 7.33721 460.617875 460.617875 0 0 1-145.124191 29.826442v190.500018h206.195866c-2.452954-84.393841-17.375727-162.553409-42.064466-227.66367z m-209.69954 37.163652a456.062207 456.062207 0 0 1-144.873292-29.826442 187.929892 187.929892 0 0 1-19.530658-7.33721c-24.412368 65.110261-39.608965 143.269829-42.064466 227.66367H489.215293V298.860466z m0 426.554165v-190.224919H282.746877c2.454228 84.144215 17.652098 161.977742 42.064466 227.388572 6.510644-2.428756 13.020014-5.158081 19.530658-7.33721 45.019218-17.354076 93.864332-27.396413 144.873292-29.826443z m45.570687 0a465.365857 465.365857 0 0 1 144.874566 29.826443c6.50937 2.17913 12.743643 4.908455 19.254287 7.33721 24.688739-65.410831 39.608965-143.244357 42.064466-227.388572H534.78598v190.224919z',
                symbolKeepAspect: true,
                name: '异构网络',
                value: [900, 500],
                label: {
                  show: true,
                  position: 'bottom',
                  fontWeight: 'bolder',
                  fontSize: 15
                }
              }
            ]
          },
          {
            type: 'lines',
            polyline: true,
            coordinateSystem: 'cartesian2d',
            lineStyle: {
              type: 'dashed',
              width: 2,
              curveness: 0.3,
              color: '#5DDBD2'
            },
            effect: {
              show: true,
              trailLength: 0.1,
              symbol: 'arrow',
              color: 'orange',
              symbolSize: 8
            },
            data: [
              [
                [120, 520],
                [270, 520]
              ],
              [
                [330, 520],
                [465, 520]
              ],
              [
                [530, 520],
                [670, 520]
              ],
              [
                [730, 520],
                [870, 520]
              ],
              [
                [870, 480],
                [730, 480]
              ],
              [
                [670, 490],
                [530, 490]
              ],
              [
                [270, 490],
                [120, 490]
              ],
              [
                [465, 490],
                [330, 490]
              ]
            ]
          }
        ]
      }
      myChart.setOption(option)
    }
  },
  mounted () {
    let flag = true
    setTimeout(() => {
      this.myEcharts()
      setInterval(() => {
        if (this.checkEveryTime) {
          if (flag) {
            this.baseConnected()
            flag = false
          } else {
            this.ueConnected()
            flag = true
          }
        }
      }, 3000)
    }, 500)
  }
}
</script>

<style lang="scss" scoped>
.page {
  .logo {
    width: 120px;
  }
  .btn-group {
    color: $color-text-placehoder;
    font-size: 12px;
    line-height: 12px;
    margin-top: 0px;
    margin-bottom: 20px;
    width: 90%;
    .btn-group__btn {
      color: $color-text-sub;
      &:hover {
        color: $color-text-main;
      }
      &.btn-group__btn--link {
        color: $color-primary;
      }
    }
  }
}
.Echarts {
  margin-top: 20px;
}

.my-label {
  background: #e1f3d8;
}

.my-content {
  background: #fde2e2;
}
.box-card {
  width: 15%;
}
</style>
